
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fim" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>vip</title>
    <script src="${pageContext.request.contextPath}/js/jquery-3.6.0.min.js"></script>
    <link href="${pageContext.request.contextPath}/css/vip/VIP.css" rel="stylesheet" media="none" onload="this.media='all'">
<body>
<div class="nav">
    <div class="head-logo">
        <a href="" ></a>
    </div>
    <div class="head-nav">
        <ul>
            <li><a href="${pageContext.request.contextPath}/index" class="first-item">首页</a> </li>
            <li><a href="">手机端</a> </li>
            <c:if test="${empty loginCustomer}">
                <li><a href="${pageContext.request.contextPath}/users/login.jsp">成为房东</a> </li>
            </c:if>
            <c:if test="${!empty loginCustomer}">
                <li><a href="${pageContext.request.contextPath}/house_owner/houseadd.jsp">成为房东</a> </li>
            </c:if>
            <c:if test="${empty loginCustomer}">
                <li><a href="${pageContext.request.contextPath}/users/login.jsp">房源订单中心</a> </li>
            </c:if>
            <c:if test="${!empty loginCustomer}">
                <li><a href="${pageContext.request.contextPath}/index/order">房源订单中心</a> </li>
            </c:if>
            <c:if test="${empty loginCustomer}">
                <li><a href="${pageContext.request.contextPath}/users/login.jsp">个人中心</a> </li>
            </c:if>
            <c:if test="${!empty loginCustomer}">
                <li><a href="${pageContext.request.contextPath}/index/personalCenter">个人中心</a> </li>
            </c:if>
            <li><a href="">帮助</a> </li>
        </ul>
    </div>
    <div class="head-login">
        <c:if test="$${empty loginCustomer}">
            <a href="${pageContext.request.contextPath}/users/login.jsp">
                <img class="login-logo" src="${pageContext.request.contextPath}/image/login-logo.svg"/>
                <span class="login-title">登录</span>
            </a>
            <a href="">
                <img class="regist-logo" src="${pageContext.request.contextPath}/image/regist-logo.svg" >
                <span class="login-title">注册</span>
            </a>
        </c:if>
        <c:if test="${!empty loginCustomer}">
            欢迎${loginCustomer.cusNickname}登录，<a href="">退出</a>
        </c:if>
    </div>
</div>
<div class="VIP_main">
    <!--VIP标题-->
    <div class="VIP_main_title">
        <div class="vip_title_top" >
            <span>我的会员</span>
            <a href="${pageContext.request.contextPath}/vip/${loginCustomer.cusId}"  >充值会员</a>
        </div >
        <div class="vip_title_center">
            <span>会员类型</span>
            <span>
                <c:if test="${empty vipServer}">
                    普通用户
                </c:if>
                <c:if test="${!empty vipServer}">
                    ${vipServer.data.vipType}
                </c:if>
            </span>
        </div>
        <div class="vip_point">
            <span>积分数</span>
            <span>
                <c:if test="${empty vipServer}">
                   0
                </c:if>
                <c:if test="${!empty vipServer}">
                    ${pointServer.data.pointNumber}
                </c:if>
            </span>
            <a href="${pageContext.request.contextPath}/vip/point/${vipServer.data.vipId}">兑换优惠券</a>
        </div>
    </div>
    <br/>
    <!--VIP等级-->
    <div class="VIP_main_grade">
        <span ><img src="${pageContext.request.contextPath}/image/vip_title.svg"></span>
        <div class="vip_grade">
            <span class="vip_grade_title">您的会员时间</span>
            <div class="vip_grade_name" >
                <span class="vipStartDate">
                    <c:if test="${empty vipServer}">
                       0000-00-00
                    </c:if>
                    <c:if test="${!empty vipServer}">
                        <fim:formatDate value="${vipServer.data.vipStartDate}" pattern="yyyy-MM-dd"/>

                    </c:if>
                </span >
                <span >到</span>
                <span class="vipEndDate">
                    <c:if test="${empty vipServer}">
                        0000-00-00
                    </c:if>
                    <c:if test="${!empty vipServer}">
                        <fim:formatDate value="${vipServer.data.vipEndDate}" pattern="yyyy-MM-dd"/>

                    </c:if>
                </span>
            </div>
        </div>
    </div>
    <br/>
    <!--用户权益-->
    <div class="VIP_main_gradeGood">
        <p class="vip_gradeGood_title">您的权益</p><br/>
        <p class="vip_gradeGood_name">可享受</p>
    </div>
    <br/>
    <!--VIP等级权益-->
    <div class="VIP_main_graderule">
        <div class="vip_graderule_title">
            <p><img src="${pageContext.request.contextPath}/image/vip_rule_title.jpg"></p>
        </div>
        <div class="vip_graderule">
            <h2>会员类型</h2>
            <ul>
                <li>
                    <span><img src="${pageContext.request.contextPath}/image/vip_grade1.svg"></span>
                    <span >普通用户</span>
                </li>
                <li>
                    <span><img src="${pageContext.request.contextPath}/image/vip_grade2.svg"></span>
                    <button class="type1">包月</button>

                </li>
                <li>
                    <span><img src="${pageContext.request.contextPath}/image/vip_grade3.svg"></span>
                    <button class="type1">包季</button>

                </li>
                <li>
                    <span><img src="${pageContext.request.contextPath}/image/vip_grade4.svg"></span>
                    <a href="" class="">包年</a>

                </li>
            </ul>
        </div>
        <script>
            $(".type1").click(function(){
                var startTime;
                var endTime;
                var vipType;
                var vipPrice;
                if ($(".vipStartDate").innerText==="0000-00-00"){
                    startTime= new Date();
                }else {
                    startTime=$(".vipStartDate").innerText;
                }
                if ($(".vipEndDate").innerText==="0000-00-00"){
                    endTime=new Date();
                }else {
                    endTime=$(".vipEndDate").innerText;
                }
                vipType=$(".type1").innerText;
                if (vipType === "包月"){
                    vipPrice = 30;
                    endTime.setMonth(startTime.getMonth()+1) ;
                }else if (vipType === "包季"){
                    vipPrice=50;
                    endTime.setMonth(startTime.getMonth()+3);
                }
                var dataType ="json";
                var url="${pageContext.request.contextPath}/vip/vip";
                var Data = {
                    "cusId":${loginCustomer.cusId},
                    "vipStartDate":startTime,
                    "vipEndDate":endTime,
                    "vipPrice":vipPrice,
                    "vipStatus":"0"
                };
                $.ajax({
                        type:'POST',
                        url,
                        Data,
                        function(result) {
                        },
                        dataType
                    }
                );
            });
        </script>
    </div>
</div>
</body>
</html>
